<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>06 clear</title>
    <style>
        div{
            font-size: 88px;
        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;
            float: left;
        }
        .box2{
            width: 300px;
            height: 300px;
            background-color: blue;
            float: left;
        }
        .box3{
            width: 200px;
            height: 300px;
            background-color: orange;
            clear:both;
            /* 
            由于某些元素浮动，会导致下面兄弟元素的布局位置改变
            clear: 
                作用：清除浮动元素对当前元素的影响
                可选值：
                    left : 只清除左侧
                    right : 只清除右侧
                    both: 清除浮动元素最大高度的影响
                原理：
                    浏览器自动为元素添加上外边距
            


            总而言之：
                clear是为元素避免受到浮动元素的影响的一个属性
                    它的属性值有：left right both 清除对应边浮动元素
                    高度的最大值。


                    相比之前的BFC:
                        BFC的作用：
                            清除被浮动元素覆盖，出现在浮动元素右侧
                            解决相邻垂直父子元素的外边距问题
            
            
            
            
            */
        }
    </style>
</head>
<body>
    
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
</body>
</html>